<template>
        <div class="second_box">
            <img src="../assets/images/s2.png" class="strengths-r">
            <img src="../assets/images/s2.png" class="strengths-l">
            <div class="pages_w1145">
                <div class="swiper-news-list opacity" data-uk-scrollspy="{cls:'uk-animation-slide-top',delay:300}" v-if='isMobile==0'>
                    <swiper :options="swiperOption">
                            <!--swiper-slide-->
                            <swiper-slide v-for="(item,index) in listTemp(9,9)" :key="index">
                                <ul class="ul news_list fl-clr">
                                    <li  v-for="(items,indexs) in item " :key="indexs">
                                        <router-link :to="{name: 'news_details', params :{cid:$route.params.cid,id:items.id}}"  class="box scale">
                                            <div class="img"><img :src="$store.state.domain+items.pic"></div>
                                            <div class="time">{{items.intime|gdate('yyyy/MM/dd')}}</div>
                                            <div class="title">{{items.name}}</div>
                                        </router-link>
                                    </li>
                                </ul>
                            </swiper-slide>
                    </swiper>
                    <div class="bottom">
                        <div class="a swiper-next"></div>
                        <div class="a swiper-prev"></div>
                        <div class="swiper-pagination"></div>
                    </div>
					<div class="swiper_more"><img src="../assets/images/more.svg"></div>
                </div>
                <div v-if='isMobile==1' class="newslistweb">
                    <transition-group tag="div" name="gslide">
                    <ul class="ul news_list fl-clr" data-web="newslist"  v-for="(item,index) in listTemp(12,6)" :key="index" v-show="index<=gnodes">
                        
                        <li v-for="(items,indexs) in item " :key="indexs">
                            <router-link :to="{name: 'news_details', params :{cid:$route.params.cid,id:items.id}}"  class="box scale">
                                <div class="img"><img :src="$store.state.domain+items.pic"></div>
                                <div class="time">{{items.intime|gdate('yyyy/MM/dd')}}</div>
                                <div class="title">{{items.name}}</div>
                            </router-link>
                        </li>
                        
                    </ul>
                    </transition-group>
                    <a href="javascript:void(0);" ref="gnext" @click="myclick" class="more_bnt"><span>展开更多</span></a>
                </div>
            </div>
        </div>
</template>

<script>
import gscroll from '../js/gscroll.js'
export default {
    data() {
        return {
            isMobile:0, //pc:0 web:1
            newslist: {},
            gnodes: 0,
            swiperOption:{
                slidesPerView:1,
                spaceBetween:0,
                autoHeight: true,
                pagination: {
                    el: '.swiper-news-list .swiper-pagination',
                    clickable :true
                },
                navigation: {
                   nextEl: '.swiper-news-list .swiper-prev',
                   prevEl: '.swiper-news-list .swiper-next',
                }

            }
        }
    },
    methods: {
        myclick: function(){
            var gpages = 0;
            if(Object.keys(this.newslist).length<13){
                gpages = 0
            }else{
                gpages = Math.ceil((Object.keys(this.newslist).length-12)/6);
            }
            


            this.gnodes = this.gnodes+1;
            if(this.gnodes>=gpages){
                this.gnodes = gpages;
                $('.more_bnt').html('已加载完').addClass("no");
            }

        }

    },
    mounted () {
        let gthat = this;
        let gposition ={x:0,y:0};
        document.addEventListener('touchstart',function(e){gposition.y = e.touches[0].pageY}, false);
        let gfunction = function(e){gscroll.gscroll(e,2,gthat,gposition)};
        window.addEventListener('touchend',gfunction,false);
        this.$axios
        .get(this.$store.state.domain+'/Multi/lists.json', {
            params: {
                id:this.$route.params.cid??12
            }
        })
        .then(response => {
            this.newslist = response.data.newslist;
        })
        .catch(error => {
            console.log(error);

        });
        if (isMobile()) {
            this.isMobile=1
        } else {
            this.isMobile=0
        }

        function isMobile() {
              let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
              return flag;
        }
    },
    computed: {
        listTemp: function(){
            return function(counts,slice){
                let index =0;
                let count = counts?counts:9;
                let arrTemp = [];
                let experts = this.newslist;
                for(let i=0;i<Object.keys(this.newslist).length;i++){
                    if(i<counts){
                        index = parseInt(i/count);
                        if (arrTemp.length <= index) {
                            arrTemp.push([]);
                        }
                        arrTemp[index].push(experts[i]);
                    }else{
                        index = parseInt((i-count)/slice+1);
                        if (arrTemp.length <= index) {
                            arrTemp.push([]);
                        }
                        arrTemp[index].push(experts[i]);
                    }
                }
                return arrTemp
            }
        }
    }
}
</script>

